<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            text-align: center;
            margin-top: 30px;
        }

        table {
            border-collapse: collapse;
            width: 80%;
            margin: 20px auto; /* 设置上下边距为20px，左右边距自动 */
            padding: 20px; /* 设置左右边距为20px */
        }

        th, td {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        thead {
            background-color: #e0e0e0;
        }

        button {
            background-color: hotpink;
            border: none;
            color: white;
            cursor: pointer;
            padding: 5px 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 0 2px;
            transition-duration: 0.4s;
        }

        button:hover {
            background-color: hotpink;
        }

        input.count {
            width: 50px;
            text-align: center;
        }
        .total {
            font-weight: bold;
            font-size: 24px;
            margin-top: 20px;
            text-align: center;
        }
    </style>
    <script src="jquery.js"></script>
    <script>
        function suansuan(){
            let zongji = 0;
            $(".row").each(function (index,row){
                const price = parseFloat($(row).find(".price").text());
                const count = parseInt($(row).find(".count").val());
                const xiaoji = price * count;
                $(row).find(".xiaoji").text(xiaoji)
                if($(row).find(".cartCheckBox").prop("checked")) {
                    zongji += xiaoji;
                }
            })
            $("#total").text(zongji)
        }

        $(function (){
            suansuan();
        })

        $(function (){
            $(".add").click(function (){
                const countElement = $(this).parents("tr").find(".count")
                let count = countElement.val();
                count++;
                countElement.val(count);

                suansuan()
            })
            $(".minus").click(function (){
                const countElement = $(this).parents("tr").find(".count")
                let count = countElement.val();
                if(count == 1){
                    return;
                }
                count--;
                countElement.val(count);

                suansuan()
            })

            $("#allCheckBox").click(function (){
                $(".cartCheckBox").prop("checked",this.checked)

                suansuan()
            })

            $(".cartCheckBox").click(function (){
                let flag = true;
                $(".cartCheckBox").each(function (){
                    flag = flag && this.checked;
                })
                $("#allCheckBox").prop("checked",flag);

                suansuan()
            })

            $(".delete").click(function (){
                $(this).parents("tr").remove()

                suansuan()
            })

            $(".deleterows").click(function (){
                $(".cartCheckBox:checked").each(function (){
                    $(this).parents("tr").remove()
                })

                suansuan()
            })
        })
    </script>
</head>
<body>
    <button class="deleterows">删除所选</button>
    <table>
        <thead>
            <tr>
                <th><input id="allCheckBox" type="checkbox"/>全选 </th>
                <th>商品名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr class="row">
                <td><input type="checkbox" class="cartCheckBox" /></td>
                <td>外星人笔记本</td>
                <td class="price">200</td>
                <td>
                    <button class="minus">-</button>
                    <input class="count" value="1"/>
                    <button class="add" >+</button>
                </td>
                <td class="xiaoji">

                </td>
                <td>
                    <button class="delete">删除</button>
                </td>
            </tr>
            <tr class="row">
                <td><input type="checkbox"  class="cartCheckBox" /></td>
                <td>外星人笔记本2</td>
                <td class="price">2000</td>
                <td>
                    <button class="minus">-</button>
                    <input class="count" value="1"/>
                    <button class="add">+</button>
                </td>
                <td class="xiaoji">

                </td>
                <td>
                    <button class="delete">删除</button>
                </td>
            </tr>
            <tr class="row">
                <td><input type="checkbox"  class="cartCheckBox" /></td>
                <td>外星人笔记本3</td>
                <td class="price">150</td>
                <td>
                    <button class="minus">-</button>
                    <input id="count3" class="count" value="1"/>
                    <button class="add">+</button>
                </td>
                <td class="xiaoji">

                </td>
                <td>
                    <button class="delete">删除</button>
                </td>
            </tr>
        </tbody>
    </table>
    <div class="total" id="total">
        总价:xxx
    </div>
</body>
</html>